import { useMount } from "ahooks"
import { getData2 } from '../Data'
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'
import { FlexGridDetail } from '@grapecity/wijmo.react.grid.detail'
import { useState } from "react"


const WijmoC04 = () => {

    const [Data, setData] = useState()

    useMount(() => {
        setData(getData2(100))
    })

    if (Data) {
        return (
            <div className='Page'>
                <FlexGrid itemsSource={Data} isReadOnly>
                    <FlexGridColumn header="country Name" binding="country" width="*" />
                    <FlexGridColumn header="downloads" binding="downloads" width="2*" />
                    <FlexGridDetail isAnimated template={e => {
                        const { num01, num02, num03, num04, num05, num06, num07, num08, num09, num10 } = e.item
                        return <>
                            num01: <b>{num01}</b><br />
                            num02: <b>{num02}</b><br />
                            num03: <b>{num03}</b><br />
                            num04: <b>{num04}</b><br />
                            num05: <b>{num05}</b><br />
                            num06: <b>{num06}</b><br />
                            num07: <b>{num07}</b><br />
                            num08: <b>{num08}</b><br />
                            num09: <b>{num09}</b><br />
                            num10: <b>{num10}</b><br />
                        </>
                    }}
                    />
                </FlexGrid>
            </div>
        )
    }



}

export default WijmoC04;